<template>
  <div class="doc">
    <md-editor v-model="htmlDocMd" :pageFullscreen="true" :toolbars="[]" :noPrettier="true" :footers="[]"
      :scrollAuto="false" :readOnly="true" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue';
import FileComMd from '/README.md?raw';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

export default defineComponent({
  props: {},
  components: { MdEditor },
  setup () {
    const data = reactive({
      htmlDocMd: FileComMd
    });

    onMounted(() => { });

    onUnmounted(() => { });

    watch(() => { }, () => { });

    return {
      ...toRefs(data)
    };
  }
});
</script>

<style scoped lang="less">
.doc {
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: MintCream;

  .md-editor {

    :deep(.md-editor-content) {

      .md-editor-input-wrapper,
      .md-editor-resize-operate {
        display: none !important;
      }

      .md-editor-preview-wrapper {
        padding: 36px 560px;
      }
    }
  }
}
</style>